<template>
	<div class="index" style="min-height: 100vh;" >
    <van-nav-bar title="等级权益" left-arrow  @click-left="onClickLeft" />
    <div style="background:url('../../../static/img/jiameng2.png') no-repeat;">
      <div style="padding: 0.3rem; font-size: 0.24rem;">
        <div>
          <div class="flexcc">
            <img :src="'https://file.storep.91haoka.cn/gerenxitong/dj'+dj.level+'.png'">
          </div>
          <div class="flexcc">
            <div>{{djrules.name}}：{{dj.level}} </div>
            <div style="margin-left: 20px; font-size: 0.24rem;" @click="go4('/benyuejingyan')"><van-icon name="arrow" /></div>
          </div>
        </div>
        <div style="margin-top: 0.5rem;">

          <van-tabs v-model="active" ref="tabs" :swipe-threshold="2">
            <van-tab v-for="(item,index) in djrules.condition" :key="index" :title="item.level" >
              <template slot="title">
                <div style="border-radius: 0.2rem; width: 5rem; box-shadow: inset 0px 0px 30px 0px rgb(255, 255, 255); overflow: hidden; background: rgb(222, 231, 242); padding: 0.4rem 0.3rem; position: relative;">
                  <div v-if="dj.level == item.level" style="position: absolute; left: 0; top: 0; background: #fff; padding: 0.05rem 0.1rem; border-radius: 0 0 0.2rem 0; font-size: 12px; ">当前等级</div>
                  <div class="flexbc">
                    <div style="margin-right: 0.2rem; width: 3rem;">
                      <div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">{{item.lname}}</div>
                      <div class="flexbc" style="font-size: 12px; width: 3rem;">
                        <div>{{djrules.name}}:{{item.level}}</div>
                        <div>升级还需{{item.nextexp}}{{djrules.name}}</div>
                      </div>
                    </div>

                    <div><img :src="'https://file.storep.91haoka.cn/gerenxitong/dj'+item.level+'.png'" style="width: 1.1rem;"></div>
                  </div>
                </div>
              </template>
              <div class="flexc">
                <div><img src="../../../static/img/dengji.png" style="width: 0.5rem; margin-right: 0.1rem;"></div>
                <div style="font-size: 0.34rem; font-weight: bold;">{{item.lname}}等级权益</div>
              </div>

              <div class="flexbc" style="padding: 0.3rem; border-radius: 15px; background: rgb(246, 248, 251); margin-top: 0.3rem; ">
                <div class="flexc">
                  <div style="width: 0.2rem; height: 0.2rem; border-radius: 0.2rem; background: rgb(0, 90, 255); margin-right: 0.3rem;"></div>
                  <div style="font-size: 0.28rem; font-weight: bold;">佣金比例</div>
                </div>
                <div style="color: rgb(0, 90, 255); font-size: 0.3rem; font-weight: bold;">{{item.commission_rate}}%</div>
              </div>
              <div class="flexbc" style="padding: 0.3rem; border-radius: 15px; background: rgb(246, 248, 251); margin-top: 0.3rem; " v-if="item.user_fee_type == 0">
                <div class="flexc">
                  <div style="width: 0.2rem; height: 0.2rem; border-radius: 0.2rem; background: rgb(0, 90, 255); margin-right: 0.3rem;"></div>
                  <div style="font-size: 0.28rem; font-weight: bold;">抽成比例</div>
                </div>
                <div style="color: rgb(0, 90, 255); font-size: 0.3rem; font-weight: bold;">{{item.user_fee_percent}}%</div>
              </div>
              <div class="flexbc" style="padding: 0.3rem; border-radius: 15px; background: rgb(246, 248, 251); margin-top: 0.3rem; " v-if="item.user_fee_type == 1">
                <div class="flexc">
                  <div style="width: 0.2rem; height: 0.2rem; border-radius: 0.2rem; background: rgb(0, 90, 255); margin-right: 0.3rem;"></div>
                  <div style="font-size: 0.28rem; font-weight: bold;">抽成金额</div>
                </div>
                <div style="color: rgb(0, 90, 255); font-size: 0.3rem; font-weight: bold;">{{item.user_fee_amount}}元</div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        <div style="position: fixed; left: 0.5rem; bottom: 0.5rem;">
          <div @click="go4('/geren')" class="flexcc" style="background: rgb(0, 90, 255);  width: 6.6rem; height: 0.9rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">确定</div>
          <div style="text-align: center; margin-top: 0.2rem;" @click="show = true">等级规则 ></div>
        </div>

      </div>
    </div>
    <van-popup v-model="show" position="bottom" round >
      <div style="padding: 0.3rem;">
        <div style="background: rgb(246, 248, 251); font-size: 0.28rem; padding: 0.3rem;">
          <div class="flexbc" style="margin-bottom: 0.2rem;">
            <div>等级</div>
            <div style="text-align: right;">升级规则</div>
          </div>
          <div class="flexbc" style=" padding: 0.1rem 0; font-size: 0.26rem;" v-for="(item,index) in djrules.condition" :key="index">
            <div class="flexc">
              <div><img :src="'https://file.storep.91haoka.cn/gerenxitong/dj'+item.level+'.png'" style="width: 0.65rem; margin-right: 0.2rem;"></div>
              <div style="color: rgb(92, 139, 195);">{{item.lname}}</div>
            </div>
            <div style="text-align: right; color: rgb(120, 125, 133);">升级需{{item.level_exp}}{{djrules.name}}</div>
          </div>
          <div @click="show = false" class="flexcc" style="background: rgb(0, 90, 255); margin-top: 0.5rem; width: 6.6rem; height: 0.9rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">知道了</div>
        </div>
      </div>
    </van-popup>
	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'query',
		data() {
			return {
        alls:"",
        show:false,
        djrules:{
          condition:[]
        },
        dj:"",
        allexp:0,
        nextexp:0,
        active:1
			}
		},
		created() {

		},
		mounted() {
      document.title = "下单成功"
      this.getinfo()
		},
		methods: {
      go4:function(url){
        this.$router.push({
          path:url+location.search,
        })
      },
      getinfo:function(){

        axios.get('/api/mstore/info?shop_id='+ window.atob(this.$route.query.shop_id)).then((response)=>{
          if (response.data.msg.code == 0) {
            this.all = response.data.data
            if(this.all.json){
              this.all.json = JSON.parse(this.all.json)
            }
            document.title = this.all.store_name
          } else {
            vant.Toast(response.data.msg.info);
          }
        })
        axios.get('/agent/auth/user').then((response)=>{
        	if (response.data.msg.code == 0) {
           this.user = response.data.data
           localStorage.setItem('user',JSON.stringify(response.data.data))
        	}else {
            vant.Toast(response.data.msg.info);
        	}
        })
        // 获取等级规则
        axios.get('/agent/level/ruleandcon').then((response)=>{
        	if (response.data.msg.code == 0) {




           this.djrules = response.data.data

           // 获取个人等级
           axios.get('/agent/level/info').then((response)=>{
           	if (response.data.msg.code == 0) {
              this.dj = response.data.data

              // let exp = 0
              this.djrules.condition.forEach(item=>{
                // exp = exp + parseFloat(item.level_exp)
                let exp = item.level_exp - this.dj.exp
                if(exp < 0){
                  exp = 0
                }
                this.$set(item,'nextexp',exp)

              })

              this.djrules.condition.forEach(item=>{
                if(item.level <= this.dj.level+1){
                  this.allexp = this.allexp + parseFloat(item.level_exp)
                }
              })
              this.nextexp = this.allexp - this.dj.exp

              this.active = this.dj.level - 1
              this.$nextTick(()=>{
                this.$refs.tabs.resize();
              })
           	}else {
               vant.Toast(response.data.msg.info);
           	}
           })

        	}else {
            vant.Toast(response.data.msg.info);
        	}
        })

      },

      onClickLeft:function(){
        this.$router.back(-2)
      },
      getinfo2:function(){
        let url = ""
        if(this.$route.query.shop_id){
          //那就是分销商的店铺
          url = '/api/mstore/info?shop_id='+window.atob(this.$route.query.shop_id)
        }else{
          //有shops_id就是页面
          if(this.$route.query.shops_id){
            url = `/api/flow/storeinfo?id=${this.$route.query.shops_id}`
          }else{
            //都没有就是管理员店铺
            url = '/api/mstore/info'
          }
        }

        // axios.get('/api/mstore/info?shop_id='+this.$route.query.shop_id).then((response)=>{
        axios.get(url).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.alls = response.data.data
            if(this.alls.success != ''){
              this.alls.success = JSON.parse(this.alls.success)
            }
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
		}
	}
</script>


<style scoped lang="less">
  .index{
    .af{ position: relative; z-index: 2;
      &:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 6px;
        background: rgb(232, 237, 252);
        z-index: -1;
      }
    }
    /deep/ .van-tabs__nav{ background: transparent !important;}
    /deep/ .van-tabs--line .van-tabs__wrap{ height: auto !important;}
    /deep/ .van-tabs__line{ display: none;}
  }
</style>
